<template>
    <div class="app_container">
        <el-form :inline="true" :model="filter" size="small">
            <el-form-item label="船队ID">
                <el-input placeholder="请输入" v-model="filter.cid" clearable></el-input>
            </el-form-item>
            <el-form-item label="船只ID">
                <el-input placeholder="请输入" v-model="filter.shipId" clearable></el-input>
            </el-form-item>
            <el-form-item label="开始日期">
                <el-date-picker v-model="filter.startDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期">
                <el-date-picker v-model="filter.endDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onFilter">查询</el-button>
            </el-form-item>
        </el-form>

        <!-- 列表 -->
        <el-table border stripe :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="ID" width="60"></el-table-column>
            <el-table-column prop="shipName" label="船只名称" width="200"></el-table-column>
            <el-table-column prop="captainName" label="所属船队" width="200"></el-table-column>
            <el-table-column prop="seatTotalQuality" label="总钓位数" width="80"></el-table-column>
            <el-table-column prop="price" label="钓位价格" width="80"></el-table-column>
            <el-table-column prop="charterPrice" label="包船价格" width="80"></el-table-column>
            <el-table-column prop="wharfAddress" label="登船码头" width="200"></el-table-column>
            <el-table-column label="出海时间" width="100">
                <template slot-scope="scope">{{ scope.row.setOutTime }}-{{ scope.row.returnTime }}</template>
            </el-table-column>
            <el-table-column prop="seaArea" label="目标海域" width="200"></el-table-column>
            <el-table-column label="鱼种" width="100">
                <template slot-scope="scope">{{ scope.row.fingerling }}</template>
            </el-table-column>
            <el-table-column prop="createTime" label="发布时间" width="170"></el-table-column>
            <el-table-column label="操作" width="70">
                <template slot-scope="scope">
                    <el-button v-role="['/tmsTag/update']" type="text" @click="onDel(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <br />

        <el-row type="flex" justify="center">
            <el-pagination background layout="prev, pager, next" :current-page="filter.pageNum" :page-size="filter.pageSize" :total="total" @current-change="changePage"></el-pagination>
        </el-row>

    </div>
</template>

<script>
import { apiPublishList, apiPublishDel } from "@/api/captainManage.js";
import { checkPermission } from "@/directive/role/role.js"
export default {
    name: 'index',
    data() {
        return {
            tableData: [],
            total: 0,
            filter: {
                pageNum: 1, pageSize: 10,
                cid: '',
                shipId: '',
                startDate: '',
                endDate: '',
            },
        }
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            apiPublishList(this.filter).then(res => {
                this.tableData = res.data;
                this.total = res.total;
                this.filter.pageNum = res.pageNum;
            });
        },
        changePage(page) {
            this.filter.pageNum = page
            this.getData()
        },
        onFilter() {
            this.filter.pageNum = 1
            this.getData()
        },
        checkRule(rule) {
            return checkPermission('', { value: rule })
        },
        goDetail(id) {
            this.$router.push({ path: '/shipManage/detail', query: { id } })
        },
        onDel(item) {
            this.$msgbox({
                title: '温馨提示',
                message: `删除船只 ${item.shipName} 的出海计划？`,
                showCancelButton: true,
                cancelButtonText: '取消',
                confirmButtonText: '确认'
            }).then(() => {
                apiPublishDel(item.id).then((res) => {
                    this.$message({ message: '操作成功', type: 'success' })
                    this.getData()
                })
            }).catch(() => {
                // 点击取消
            })
        },
    },
}
</script>

<style></style>